<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>店铺管理</el-breadcrumb-item>
			<el-breadcrumb-item>商家管理</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 搜索与添加区域 -->
			<el-row :gutter="20" v-if="!storeData && !isCreate">
				<el-col :span="20">
					<el-alert title="您还未创建过店铺，可点击添加店铺按钮创建属于自己的店铺！" type="info"></el-alert>
				</el-col>
				<el-col :span="4" v-if="!storeData">
					<el-button type="primary" @click="goAddpage">添加店铺</el-button>
				</el-col>
			</el-row>

			<store-edit :isCreate="isCreate" @refresh="refresh()"></store-edit>

			<template v-if="storeData != null">
				<el-carousel :interval="4000" type="card" height="300px" style="background-color: #eee;margin-bottom: 50px;">
					<el-carousel-item v-for="item in storeData.store_banner" :key="item._id">
						<img :src=" api_url + item " width="100%" height="100%" />
					</el-carousel-item>
				</el-carousel>
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="店铺信息" name="first">
						<store-info :storeinfo="storeData"></store-info>
					</el-tab-pane>
					<el-tab-pane label="信息修改" name="second">
						<store-edit :storeinfo="storeData" :isCreate="isCreate"></store-edit>
					</el-tab-pane>
					<el-tab-pane label="商品列表" name="third">
						<store-list :storegoods="storeData._id"></store-list>
					</el-tab-pane>
					<el-tab-pane label="添加商品" name="five">添加商品</el-tab-pane>
				</el-tabs>
			</template>

		</el-card>

	</div>
</template>

<script>
	import cityData from '../order/citydata.js'
	import StoreInfo from './StoreInfo.vue'
	import StoreEdit from './StoreEdit.vue'
	import StoreList from './StoreList.vue'
	export default {
		components: {
			StoreInfo,
			StoreEdit,
			StoreList
		},
		data() {
			return {
				api_url: this.$api_url,
				// 商家数据
				userinfo: {},
				// 店铺数据
				storeData: null,
				isCreate: false,
				activeName: 'first'
			}
		},
		created() {
			this.userinfo = JSON.parse(window.sessionStorage.getItem('userinfo'));
			this.getStoreInfo();
		},
		methods: {
			async getStoreInfo() {
				const { data: res } = await this.$http.get('stores/' + this.userinfo._id);
				console.log('store', res);
				if (res.code !== 200) return this.$message.error(res.msg)
				this.$message.success(res.msg)
				this.storeData = res.data;
				window.sessionStorage.setItem('storeinfo', JSON.stringify(res.data))
				console.log('data', this.storeData);
				this.isCreate = false;
			},
			// 添加店铺表单
			goAddpage() {
				this.isCreate = true;
			},
			handleClick(tab) {
				console.log(tab.name);
				if (tab.name == 'five') {
					this.$router.push('/goods/add')
				}
			},
			// 接收子组件事件
			refresh() {
				console.log(1352132)
				this.getStoreInfo();
			}
		}
	}
</script>

<style lang="less" scoped>
	h2 {
		border-bottom: 2px solid #eee;
		padding-bottom: 5px;
		color: #8d8d8d;
	}
</style>
